<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css"
        media="all">
  <link rel="stylesheet" href="../css/public.css" media="all">
  </head>
  <body>
  <div class="layuimini-container">
    <div class="layuimini-main">

      <fieldset class="table-search-fieldset">
        <legend>搜索订单信息</legend>
        <div style="margin: 10px 10px 10px 10px">
          <form class="layui-form layui-form-pane" id="form1" action="/bill/export" method="post" target="_blank">

            <div class="layui-form-item">
            <div class="layui-inline">
              <label  class="layui-form-label">会员账号</label>
              <div class="layui-input-inline">
                <input id="accountNumber" type="text" name="accountNumber" autocomplete="off"
                       class="layui-input">
              </div>
            </div>

            <div class="layui-inline">
              <label  class="layui-form-label">订单号</label>
              <div class="layui-input-inline">
                <input id="code" type="text" name="code" autocomplete="off"
                       class="layui-input">
              </div>
            </div>
            <div class="layui-inline">
              <label  class="layui-form-label">订单状态</label>
              <div class="layui-input-inline">
                <select id="billStatus" name="billStatus">
                  <option></option>
                  <option value="已支付">已支付</option>
                  <option value="已取消">已取消</option>
                  <option value="已发货">已发货</option>
                </select>
              </div>
            </div>

            <div class="layui-inline">
              <button id="serachBtn" type="button"
                      class="layui-btn layui-btn-primary" lay-submit
                      lay-filter="data-search-btn">
                <i class="layui-icon"></i> 搜 索
              </button>
              <button id="exportBtn" type="button"
                      class="layui-btn layui-btn-primary" lay-submit
                      lay-filter="data-search-btn">
                <i class="layui-icon"></i> 导出
              </button>
            </div>
          </div>
        </form>
      </div>
    </fieldset>

    <table class="layui-hide" id="currentTableId"
           lay-filter="currentTableFilter"></table>

    <script type="text/html" id="currentTableBar">
      {{# if(d.status=='已支付'){ }}
      <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="go">发货</a>
      {{# } }}
      <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="billDetail">详情</a>
    </script>

  </div>
</div>
  <!-- 定义点击详情时弹出窗口的模板 -->
  <script type="text/html" id="billDetailForm">

    <form class="layui-form" lay-filter="billDetailForm">
      <div id="models">

      </div>
    </form>
  </script>
  <script type="text/html" id="billDetailInfoTemplate">
    {{#  layui.each(d,function(i, billDetailInfo){ }}
    <div class="layui-form-item">

      <label class="layui-form-label">商品名称</label>
      <div class="layui-input-inline">
        <input id="waresName" type="text" name="waresName" autocomplete="off"  class="layui-input" value="{{billDetailInfo.waresName}}" disabled>
      </div>

      <label class="layui-form-label">商品型号</label>
      <div class="layui-input-inline">
        <input id="memberWaresVersion" type="text" name="memberWaresVersion" autocomplete="off"  class="layui-input" value="{{billDetailInfo.memberWaresVersion}}" disabled>
      </div>

      <label class="layui-form-label">商品颜色</label>
      <div class="layui-input-inline">
        <input id="memberWaresColor" type="text" name="memberWaresColor" autocomplete="off"  class="layui-input" value="{{billDetailInfo.memberWaresColor}}" disabled>
      </div>

      <label class="layui-form-label">商品状态</label>
      <div class="layui-input-inline">
        <input id="status" type="text" name="status" autocomplete="off"  class="layui-input" value="{{billDetailInfo.status}}" disabled>
      </div>

    </div>
    {{#  }); }}
  </script>
<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
  layui.use([ 'form', 'table', 'layer', 'laydate','laytpl' ], function() {
    var $ = layui.jquery, form = layui.form, table = layui.table;
    layer = layui.layer;
    laydate = layui.laydate;
    var laytpl = layui.laytpl;



    $("#serachBtn").on("click", function() {
      laydate.render({
        elem : '#maindate' //指定元素
      });
      table.render({
        elem : '#currentTableId',
        url : '/bill/list',//请求放在表格中的数据
        where:{
          accountNumber:$("#accountNumber").val(),
          code:$("#code").val(),
          billStatus:$("#billStatus").val()
        },
        toolbar : '#toolbarDemo',
        defaultToolbar : [ 'filter', 'exports', 'print', {
          title : '提示',
          layEvent : 'LAYTABLE_TIPS',
          icon : 'layui-icon-tips'
        } ],
        cols : [ [ {
          type : "checkbox",

        }, {
          field : 'id',
          title : 'ID',
          sort : true
        },{
          field : 'accountNumber',
          title : '会员账号',
          sort : true
        },{
          field : 'username',
          title : '会员名称',
          sort : true
        },{
          field : 'code',
          title : '订单号',
          sort : true
        },{
          field : 'createTime',
          title : '创建时间',
          sort : true
        },{
          field : 'price',
          title : '订单价格',
          sort : true
        },{
          field : 'status',
          title : '订单状态'
        }, {
          field : 'remark',
          title : '备注'
        } ,{
          title : '操作',
          toolbar : '#currentTableBar',
          align : "center"
        }] ],
        limits : [ 5,10, 15 ],
        limit : 15,
        page : true,
        skin : 'line'
      });
    }).click();

    //给导出按钮绑定事件
    $("#exportBtn").on("click",function (){
      $("#form1").submit();
    });


    //给操作框绑定事件
    table.on('tool(currentTableFilter)', function(obj) {
      //如果点的时发货按钮
      if (obj.event === 'go') {
        layer.confirm("确认发货吗？",function (){
          $.post("/bill/updateStatus?id="+obj.data.id,function (res){
            layer.closeAll();
            $("#serachBtn").click();
            layer.msg(res.msg);
          });
        });
      }else if(obj.event === 'billDetail') {
        //如果点的是详情按钮
        $.post("/bill/billDetailInfo?billId="+obj.data.id,function (billDetailInfo){
          layer.open({
            type : 1,
            title : "商品详情页",
            area : [ "1300px", "500px"],
            content : $("#billDetailForm").html()
          });
          laytpl($("#billDetailInfoTemplate").html()).render(billDetailInfo,function (ht){
            $("#models").html(ht);
          });
        });
      }

    });

  });
</script>

</body>
</html>